import React, { PropTypes, Component } from 'react';
import Table from './MyTable'
import Column from './Column'
import {myAjax, ROOTURL_TABLE, ROOTPATH} from './../publicAPI/publicAPI';
import styles from './SimpleTable.css';

/*const data1 = [ //Object键值对的键名必须为字符串形式
  {'商品名': 'AAA', '1.': 10, '2.': 120, '3.': 30, '...': 10, '一直到': 120, '...': 30, '30或31': 10, '只不过': 120, '嫌麻烦': 30, '才没改': 10, '还需要有': 120, '一个月的合计数据': 30, '合计':100},
];*/

export default React.createClass({
  getInitialState: function() {
    let date = new Date();
    return {
      year: date.getFullYear(),
      month: date.getMonth() + 1,
      shopNames: [],
      tData: [{}],
      processData: [{}],
    };
  },
  componentWillMount: function() {
    let _this = this;
    myAjax(ROOTURL_TABLE + 'kabuy/item/itemmondailysales.api', 'POST', { year:this.state.year, month:this.state.month }, function(data) {
      console.log(data);

      var processData = [];
      var ids = data.itemIds;
      for(var i in ids) {
        let id = ids[i];
        let dataObject = data[id].itemMonSales;
        Object.assign(dataObject, {'合计': dataObject.monTotalSales, '商品名称': data[id].itemName});
          delete dataObject.monTotalSales;
        processData.push(dataObject);
      }
      //console.log(processData);
      
      this.setState({tData: processData});

    }.bind(_this), function(err) {});
  },
  handleClick: function() {
		let yearSelect = parseInt(this.refs.yearSelect.value);
		let monthSelect = parseInt(this.refs.monthSelect.value);
    if(!yearSelect || !(/^2\d{3}$/.test(yearSelect))) {
      alert("内容不能为空或格式错误");
      this.refs.yearSelect.focus();
      return
    }
    if(!monthSelect || !(/^0?[1-9]{1}$|^1[0-2]$/.test(monthSelect))) {
      alert("内容不能为空或格式错误");
      this.refs.monthSelect.focus();
      return
    }
		let _this = this;
		myAjax(ROOTURL_TABLE + 'cafune/servant/sermondailydata.api', 'POST', {year: yearSelect, month: monthSelect}, function(data) {
      console.log(data);
      var processData = [];
      var ids = data.itemIds;
      for(var i in ids) {
        let id = ids[i];
        let dataObject = data[id].itemMonSales;
        Object.assign(dataObject, {'合计': dataObject.monTotalSales, '商品名称': data[id].itemName});
          delete dataObject.monTotalSales;
        processData.push(dataObject);
      }
      //console.log(processData);
      
      this.setState({
        tData: processData,
        //year: yearSelect,
        //month: monthSelect,
      });
		}.bind(_this), function(err) {alert("获取服务器内容失败");});
	},
  handleKeyPress: function(e) {
    if(e.which == 13) {
      this.handleClick();
    }
  },
  render: function() {
    return (
      <div>
        <div className="right-wapper">
        <div className='rt-wrap'>
        <div>
        <form>
          <label >
            <input ref="yearSelect" onKeyPress={this.handleKeyPress} className={styles.input} placeholder="如：2016" />年
            <span>&nbsp;&nbsp;</span><input ref="monthSelect" onKeyPress={this.handleKeyPress} className={styles.input} placeholder="如：3" />月
          </label>
          <button type="button" onClick={this.handleClick} onKeyPress={this.handleKeyPress} className={styles.button}>确定</button>
        </form>
        </div>
        <Table data={this.state.tData} className={styles.container}>
          { //箭头函数返回一个对象时，用圆括号表示
            //设置是否开启排序，捞一点就用手动咯
            Object.keys(this.state.tData[0]).map(entry => {
              if(/\D/g.test(entry)) {
                if(/理发师id/.test(entry) || /所在理发店/.test(entry)) {
                  //console.log(entry);
                  return <Column dataKey={entry} name={entry} width="120px" order="false" key={`col-${entry}`}/>
                } else {
                  //console.log(entry);
                  return <Column dataKey={entry} name={entry} width="120px" key={`col-${entry}`}/>
                }
              } else {
                return <Column dataKey={entry} name={entry} key={`col-${entry}`}/>
              }
              
            })
          }
        </Table>
        </div>
        </div>
      </div>
    );
  }
});


